<template>
  <div class="log">
    <div class="toolBar">
      <el-input
        size="small"
        clearable
        @clear="getLogList"
        placeholder="输入接口描述"
        style="width: 30%"
        v-model="likeName"
      >
        <el-button
          slot="append"
          @click="getLogList"
          icon="el-icon-search"
        ></el-button>
      </el-input>
      <el-button style="margin-left:10px;" size="small" type="danger" icon="el-icon-delete" @click="deleteLog">删除</el-button>
    </div>
    <div class="content">
      <el-table height="520" :data="tableData" size="small" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="logDescribe"
          label="接口描述"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="method"
          label="接口方法"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="runTime"
          label="执行耗时"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="param"
          label="执行参数"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="ipAddress"
          label="IP地址"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="userId"
          label="执行用户"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="createTime"
          label="执行时间"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="goSize"
        @current-change="goPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import * as api from "@/js/api";
export default {
  name: "log",
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      likeName: "",
      total: 0,
      selectedList:[]
    };
  },
  methods: {
    deleteLog(){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteLog(this.selectedList).then(res=>{
              this.$message({
                  type: res.status?'success':'error',
                  message: res.message
              })
              this.selectedList = [];
              this.getLogList();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleSelectionChange(data){
        this.selectedList = [];
        data.forEach(element => {
            this.selectedList.push(element.id);
        });
    },
    goSize(size) {
      this.pageSize = size;
      this.getLogList();
    },
    goPage(num) {
      this.pageNum = num;
      this.getLogList();
    },
    getLogList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        likeName: this.likeName,
      };
      api.getLogList(param).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
  },
  mounted() {
    this.getLogList();
  },
};
</script>
<style scoped>
.log {
  padding: 10px;
}
.toolBar {
  text-align: left;
  border-bottom: 1px solid gray;
  padding-bottom: 5px;
}
</style>